<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .bg {
            width: 343px;
            height: 480px;
            background: url(./img/bg.jpg);
            position: relative;
            margin: 100px auto;
            -moz-user-select: none;
            overflow: hidden;
        }
        /* log和小鸟 */
        
        .head {
            width: 236px;
            height: 77px;
            background: url(./img/head.jpg);
            position: absolute;
            top: 100px;
            left: 0;
            right: 0;
            margin: auto;
        }
        
        .head img {
            position: absolute;
            right: 0;
            top: 50%;
            bottom: -13px;
            animation: birFly 1.5s linear infinite;
        }
        
        @keyframes birFly {
            0% {
                top: 50%;
            }
            25% {
                top: 25%;
            }
            50% {
                top: 50%;
            }
            75% {
                top: 75%;
            }
            100% {
                top: 50%;
            }
        }
        
        .menu {
            width: 100%;
            text-align: center;
            position: absolute;
            top: 260px;
        }
        /* 给按钮添加收拾 */
        
        .menu img {
            cursor: pointer;
        }
        /* 结束菜单 */
        
        .end {
            width: 100%;
            text-align: center;
            position: absolute;
            top: 100px;
            font-size: 30px;
            display: none;
        }
        
        #currentScore {
            position: absolute;
            left: 250px;
            top: 40px;
        }
        
        #bestScore {
            position: absolute;
            left: 250px;
            top: 90px;
        }
        /* ----------------------------------- */
        
        #pipes {
            position: absolute;
            top: 0;
            height: 100%;
            list-style: none;
        }
        /* 真正储存上下管道是是li标签   准备起个class名叫pipe */
        
        .pipe {
            width: 62px;
            height: 423px;
            position: absolute;
        }
        /* 上管道 */
        
        .upPipe {
            position: absolute;
            top: 0%;
            width: 100%;
            background: url(./img/up_pipe.png)bottom no-repeat, url(./img/up_mod.png) repeat-y;
        }
        /* 下管道 */
        
        .downPipe {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: url(./img/down_pipe.png) no-repeat top, url(./img/down_mod.png) repeat-y;
        }
        /* =====================飞扬的小鸟 */
        
        #bird {
            position: absolute;
            left: 62px;
            top: 200px;
            display: none;
        }
        
        #score {
            position: absolute;
            width: 100%;
            text-align: center;
            top: 0;
            display: none;
        }
    </style>
</head>

<body>
    <div class="bg"><img src="./img/bg.jpg" alt="">
        <div class="head">
            <img src="./img/bird.png" alt="">
        </div>
        <div class="menu">
            <img src="./img/start.jpg" alt="">
        </div>
        <div class="end">
            <!-- 结束菜单 -->

            <img src="./img/message.jpg" alt="">
            <span id="currentScore">0</span>
            <span id="bestScore">0</span>
        </div>
        <!-- 管道 -->
        <ul id="pipes"></ul>
        <!-- 小鸟 -->
        <img src="./img/bird.png" alt="" id="bird">
        <!-- 顶部的分数 -->
        <div id="score"><img src="./img/0.jpg" alt=""></div>
        <!-- 音乐 -->
        <audio src="./music/bullet.mp3" id="bullet"></audio>
        <audio src="./music/game_music.mp3" id="ganmeMusic"></audio>
        <audio src="./music/game_over.mp3" id="ganmeOver"></audio>
    </div>

</body>

</html>
<script src="./tiao.js"></script>